<template>
      <div>
  <div class="opt-area-02">
    <div class="left-con">
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="账号" style="width: 164px" v-model="params.login_name"/>
      </div>
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="身份证号" style="width: 164px" v-model="params.cardno"/>
      </div>
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="手机号" style="width: 164px" v-model="params.mobile"/>
      </div>
      <Button type="primary" @click="findTableT">查询</Button>
    </div>
  </div>
  <Table border :columns="tableColumns" :data="tableData">
<!--    <template slot-scope="{ row, index }" slot="is_hcsh">-->
<!--      <span v-show="row.is_hcsh === '0'">未开通</span>-->
<!--      <span v-show="row.is_hcsh === '1'">已开通</span>-->
<!--      <span v-show="row.is_hcsh === '2'">开通失败</span>-->
<!--    </template>-->
    <template slot-scope="{ row, index }" slot="role">
      <Tag v-for="(item,index) in row.roleList" :key="index"  color="blue">{{item.name}}</Tag>
    </template>
    <template slot-scope="{ row, index }" slot="action">
      <Button type="error" size="small" style="margin-right: 5px" @click="deleteUser(row)">删除</Button>
      <Button type="warning" size="small" style="margin-right: 5px" @click="editRole(row)">配置角色</Button>
<!--      <div style="margin-top: 5px">-->
<!--        <Button type="primary" size="small" style="margin-right: 5px" @click="disposeSstMenu(row)">开通盛事通菜单</Button>-->
<!--      </div>-->
<!--      <div style="margin-top: 5px">-->
<!--        <Button type="success" size="small" style="margin-right: 5px" @click="showSstMenu(row)">查看盛事通菜单</Button>-->
<!--      </div>-->
    </template>
  </Table>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
          @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <Modal
    v-model="deleteModel.show"
    title="提示"
    @on-ok="deleteUserOk"
    @on-cancel="deleteModel.show = false">
    是否删除此用户，该操作不可恢复！请谨慎操作。
  </Modal>
  <Modal
    v-model="menuModel.show"
    title="盛事通菜单"
    @on-ok="menuModel.show = false"
    @on-cancel="menuModel.show = false">
    <Tag v-for="(item,index) in this.menuModel.info" :key="index"  color="blue">{{item.show_name}}</Tag>
  </Modal>
  <Modal
    v-model="roleModel.show"
    title="配置角色"
    @on-ok="editRoleOk"
    @on-cancel="roleModel.show = false">
    <CheckboxGroup v-model="userRoleList">
      <Checkbox v-for="(item,index) in roleList" :key="index" :label="item.id" border v-show="item.id !== 'eb2c9ea04bdf4ef3abc7eeb5855abaaf'">
          {{item.name}}
      </Checkbox>
    </CheckboxGroup>
  </Modal>
</div>
</template>

<script>
import {
  AddRole,
  disposeSstMenu,
  findSstUserMenuList,
  getDeleteUser,
  getForUserList,
  getUserListNew
} from '../../api/eventlist'

export default {
  name: 'index',
  components: {
  },
  data () {
    return {
      roleModel: {
        show: false,
        info: []
      },
      menuModel: {
        show: false,
        info: []
      },
      deleteModel: {
        show: false,
        info: {}
      },
      severUserInfo: {},
      tableColumns: [
        {
          type: 'index',
          width: 70,
          title: '序号'
        },
        {
          title: '机构名称',
          key: 'company_name',
          width: '200',
          align: 'center'
        },
        {
          title: '账号',
          key: 'login_name',
          width: '100',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          width: '200',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobile',
          width: '150',
          align: 'center'
        },
        {
          title: '备注',
          key: 'remarks',
          width: '100',
          align: 'center'
        },
        {
          title: '证件号码',
          key: 'cardno',
          width: '200',
          align: 'center'
        },
        {
          title: '权限',
          slot: 'role',
          width: '200',
          align: 'center'
        },
        // {
        //   title: '手机端开通状态',
        //   width: 90,
        //   slot: 'is_hcsh',
        //   align: 'center'
        // },
        {
          title: '操作',
          width: 200,
          slot: 'action',
          fixed: 'right',
          align: 'center'
        }
      ],
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      roleList: [],
      userRoleList: []
    }
  },
  methods: {
    getRoleList  (row) {
      getForUserList({ flag: 1, company_id: this.severUserInfo.company_id }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.roleList = data.data
          console.log(this.roleList)
        } else {
          this.error(data)
        }
      })
    },
    editRoleOk  (row) {
      AddRole({ user_id: this.roleModel.info.id, rolelist: this.userRoleList }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Message.success('配置成功')
        } else {
          this.error(data)
        }
        this.findTable()
      })
    },
    disposeSstMenu  (row) {
      disposeSstMenu({ card_no: row.cardno }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Message.success('开通成功')
        } else {
          this.error(data)
        }
        this.findTable()
      })
    },
    showSstMenu  (row) {
      findSstUserMenuList({ card_no: row.cardno }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.menuModel.show = true
          this.menuModel.info = data.data
        } else {
          this.error(data)
        }
        this.findTable()
      })
    },
    deleteUser (row) {
      this.deleteModel.info = row
      this.deleteModel.show = true
    },
    editRole (row) {
      this.roleModel.info = row
      this.userRoleList = []
      let that = this
      row.roleList.forEach(function (temp) {
        that.userRoleList.push(temp.role_id)
      })
      this.roleModel.show = true
    },
    deleteUserOk (row) {
      getDeleteUser(this.deleteModel.info).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Message.success('删除成功')
        } else {
          this.error(data)
        }
        this.findTable()
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.findTable()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTable(this.params.pageNo)
    },
    findTableT () {
      this.params.pageNo = 1
      this.findTable()
    },
    findTable () {
      let data = this.params
      console.log(data)
      getUserListNew(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.params.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
        }
      })
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.findTable()
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.getRoleList()
  }
}
</script>

<style scoped>
/deep/.ivu-table-fixed-body{
  background: white;
}
/deep/.ivu-table:after, .ivu-table:before{
  background-color: transparent!important;
}
>>>.ivu-table:after, .ivu-table:before{
  background-color: transparent!important;
}
.page_style{
  margin-top: 10px;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
.actionBtn {
  margin-top: 5px;
  margin-left: 5px;
}
</style>
